<template>
  <div>
    <div class="mainwrap">
      <!-- 中间部分的页面主体 -->
      <div class="middlewrap">
        <!-- 左边的容器 开始-->
        <div class="leftwrap">
          <!-- 热门推荐标题 -->
          <top-recommend></top-recommend>
          <!-- 热门推荐歌曲详情 -->
          <top-recommend-details
            :topRecommend="topRecommend"
          ></top-recommend-details>
          <!-- 新碟上架标题 -->
          <new-card></new-card>
          <!-- 新碟上架轮播图  静态 怎么实现?-->
          <new-card-details></new-card-details>
          <!-- 榜单 -->
          <song-list></song-list>
          <!-- 榜单详情 -->
          <song-list-details></song-list-details>
        </div>
        <!-- 左边的容器 结束 -->

        <!-- 右边的容器 -->
        <div class="rightwrap">
          <!-- 用户登录模块 -->
          <user-login></user-login>
          <!-- 入驻歌手模块 -->
          <inner-singer :innerSinger="innerSinger"></inner-singer>
          <!-- 热门主播模块 -->
          <hot-anchor></hot-anchor>
        </div>
      </div>

      <!-- 底部通用条 开始 -->
      <div class="m-foot"></div>
      <!-- 底部通用条 结束 -->
    </div>
  </div>
</template>

<script>
import { createLogger } from "vuex";
import HotAnchor from "./hotAnchor.vue";
import InnerSinger from "./innerSinger.vue";
import NewCard from "./newCard.vue";
import NewCardDetails from "./newCardDetails.vue";
import SongList from "./songList.vue";
import SongListDetails from "./songListDetails.vue";
import topRecommend from "./topRecommend.vue";
import TopRecommendDetails from "./topRecommendDetails.vue";
import UserLogin from "./userLogin.vue";
export default {
  components: {
    topRecommend,
    TopRecommendDetails,
    NewCard,
    NewCardDetails,
    SongList,
    SongListDetails,
    UserLogin,
    InnerSinger,
    HotAnchor,
  },
  data() {
    return {
      topRecommend: [],
      innerSinger: [],
    };
  },
  mounted() {
    this.getTopRecommend();
    this.getInnerSinger();
  },
  methods: {
    getTopRecommend() {
      this.axios.get("/top/playlist?limit=8").then((res) => {
        // console.log(res);
        this.topRecommend = res.data;
      });
    },
    getInnerSinger() {
      this.axios.get("/artist/list?limit=5&cat=5001").then((res) => {
        // console.log(res);
        this.innerSinger = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.middlewrap {
  width: 980px;
  overflow: hidden;
  /* min-height: 1500px; */
  margin: 0 auto;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  background-color: #fff;
}

.middlewrap .leftwrap {
  width: 723px;
  /* height: 800px; */
  float: left;
  overflow: hidden;
  margin-bottom: 30px;
}
.middlewrap .rightwrap {
  overflow: hidden;
  width: 250px;
  height: 1400px;
  float: right;
  overflow: hidden;
  border-left: 1px solid #ccc;
}
</style>